<template>
    <div class="newGoods" ref="a">
        <h1>热门品牌 <span style="margin-right:800px;">国际经典品质保障</span><span><button @click="flag=false">&lt;</button><button @click="flag=true">&gt;</button></span></h1>
        <ul class="list">
            <li v-for="item in newGoodsList" :key="item.id">
                <img :src="item.picture" alt="">
                <p>{{ item.title }}</p>
                <p>{{ item.alt }}</p>
            </li>
        </ul>
        <ul class="img" v-show="flag">
            <img src="../../assets/img/品牌1.jpg" alt="">
            <img src="../../assets/img/品牌2.jpg" alt="">
            <img src="../../assets/img/品牌3.jpg" alt="">
            <img src="../../assets/img/品牌4.jpg" alt="">
            <img src="../../assets/img/品牌5.jpg" alt="">
        </ul>
    </div>
</template>

<script>
import { getHomeBrand } from '@/utils/api/homeapi'
import { lazyLoad } from '@/utils/lazyLoad'
export default {
    data() {
        return {
            newGoodsList: [],
            flag:false,
        }
    },
    mounted() {
        lazyLoad(this.$refs.a, this.getNewGoodsList);
    },
    methods: {
        async getNewGoodsList() {
            let res = await getHomeBrand();
            console.log(res);
            this.newGoodsList = res.result
        }
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/components';

.newGoods {
    width: 100%;
    height: 500px;
    position: relative;
    // background-color: white;
    h1 {
        line-height: 100px;
        display: flex;
        justify-content: space-between;
        span {
            font-size: 20px;
            color: #ccc;
            // margin-right: 400px;
        }
    }

    .list {
        width: 100%;
        height: 400px;
        // background-color: yellow;
        display: flex;
        justify-content: space-between;

        li {
            width: 19%;
            height: 100%;
            background-color: #f0f9f4;
            @include hoverShadow();

            img {
                width: 100%;
                height: 100%;
            }

            p {
                width: 100%;
                padding-left: 10px;
                text-align: center;
                line-height: 40px;
                overflow: hidden; //（文字长度超出限定宽度，则隐藏超出的内容）
                white-space: nowrap; //（设置文字在一行显示，不能换行）
                text-overflow: ellipsis; //（规定当文本溢出时，显示省略符号来代表被修剪的文本）
                font-size: 24px;

                span {
                    color: red;
                }
            }
        }
    }
    .img {
        width: 100%;
        height: 400px;
        // background-color: yellow;
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: 100px;
        left: 0;
        z-index: 999;
        img {
            width: 19%;
            height: 100%;
            background-color: #f0f9f4;
            @include hoverShadow();
        }
    }
}
</style>